<template>
	<PageContainer>
		<template #header>
			<view class="flex-row-between">
				<view class="global-page-title">消息</view>
				<view class="global-text-button" @click="toPage">查看</view>
			</view>
		</template>
		<view class="message-container">
			<ScrollList :list="dataList" :total="total" :queryParams="queryParams" :is-loading="isLoading">
				<template v-for="(item, index) in dataList">
					<MessageContent :item="item" :key="index" />
				</template>
			</ScrollList>
		</view>
	</PageContainer>
</template>

<script>
	import store from '@/store';
	import PageContainer from '@/components/PageContainer/PageContainer.vue';
	import MessageContent from './components/MessageContent/MessageContent.vue';
	import ScrollList from '@/components/ScrollList/index.vue';
	export default {
		components: {
			PageContainer,
			MessageContent,
			ScrollList,
		},
		data() {
			return {
				queryParams: {
					current: 1,
					size: 20,
				},
				total: 0,
				isLoading: false,
				dataList: [],
			}
		},
		methods: {
			async getMsgList(type) {
				//消息数据请求
				// const result = await msgList();
				// result.data.forEach(item => {
				// 	item.profileVo = item.profileVo || {};
				// })
				if (type == 1) {
					this.dataList = result.data;
				} else {
					this.dataList = this.dataList.concat(result.data);
				}
				const isHide = this.dataList.every(n => n.notReadNumber == 0);
				if (isHide) {
					uni.hideTabBarRedDot({
						index: 2,
					})
				}
				this.total = result.total || 0;
				this.isLoading = false;
				uni.stopPullDownRefresh();
			},
			toPage() {

			}
		},
		onReachBottom() {
			if (this.isLoading) {
				return;
			}
			if (this.queryParams.current * this.queryParams.size < this.total) {
				this.queryParams.current++;
				this.getChatList();
			}
		},
		onPullDownRefresh() {
			this.queryParams.current = 1;
			this.getChatList(1);
		},
		onShow() {
			this.queryParams.current = 1;
			this.getChatList(1);
		},
		onLoad() {
			this.$socket.getMessage(message => {
				this.queryParams.current = 1;
				this.getChatList(1);
			})
		}
	}
</script>

<style scoped lang="scss">
	.message-container {
		padding: 30rpx 0;
	}
</style>